<style scoped>
    .fill-item{height:50px;padding:0 10px;}
    .fill-item .label {
      width: 80px;
    }
   
    .next-btn{display:block;border-radius:5px;height:45px;text-align: center;line-height: 45px;color:#fff;margin:20px 10px;}
</style>
<template>
  <wrap title="社交信息">
    <div slot="page">
      <div class="fill-box light-bg margin-bottom" v-for="(c,i) in society.contacts" :key="i">
        <div class="fill-item border-bottom flex flex-justify-between flex-align-center">
          <span class="label font-15">关&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;系</span>
          <span class="font-15 fill-data content" @click="showPicker(i)" >
            {{c.label}}
            <i class="fa fa-angle-right font-24" v-if=" !(i==3 && type==2)"></i> 
          </span> 
        </div>
        <div class="fill-item border-bottom flex flex-justify-between flex-align-center">
          <span class="label font-15">真实姓名</span>
          <input class="font-15 content" v-model="c.name" type="text" placeholder="请填写真实姓名">
        </div>
        <div class="fill-item border-bottom flex flex-justify-between flex-align-center">
          <span class="label font-15">手机号码</span>
          <input class="font-15 content" v-model="c.phone" type="number" placeholder="请填写真实手机号码">
          <span class="fa fa-address-book-o fa-lg grey-9" v-if="canSelectContact" @click="getContacts(i)"><i class="fa fa-angle-right margin-left"></i></span> 
        </div>
      </div>
      <a href="javascript:;" :class="['next-btn',nextEnable?'red-bg':'grey-9-bg','font-16']" @click="next()">下一步</a>
      <cube-picker :show="showFirstPicker" :data="first" @select="select" @cancel="showFirstPicker = false"></cube-picker>
      <cube-picker :show="showSecondPicker" :data="second" @select="select" @cancel="showSecondPicker = false"></cube-picker>
      <cube-picker :show="showThirdPicker" :data="third" @select="select" @cancel="showThirdPicker = false"></cube-picker>
    </div>
  </wrap>
</template>
<script>
    /* eslint-disable*/
    const Validate = {
      mobile: function (num) { // 验证手机
        return /^1[3|4|5|7|8][0-9]\d{8}$/.test(num)
      }
    }
    import wrap from '../../components/wrap.vue'
    import cubePicker from '../../components/cubePicker.vue'
    export default {
      components: {wrap, cubePicker},
      data () {
        return {
          type: 0,
          nextEnable: false,
          showFirstPicker: false,
          showSecondPicker: false,
          showThirdPicker: false,
          society: {
            'contacts': [],
          },
          totalContacts: [],
          first: [],
          second: [],
          third: [],
        }
      },
      created () {
        this.fetchData()    
      },
      computed: {
        canSelectContact () {
          /* eslint-disable no-undef */
          return (this.$store.state.inAPP && jiujiJsBridge && jiujiJsBridge.getContacts)
        }
      },
      watch:{
        society:{
          handler:function(){
            let self=this
            let flag = true
            self.society.contacts.forEach(item => {
              if (item.relationCode == 0 || !item.name || !item.phone) {
                flag = false
              }
            })
            if (flag) {
              self.nextEnable = true
            } else {
              self.nextEnable = false
            }
          },
          deep:true
        }
      },
      methods: {
        fetchData () {
          const self = this
          self.$Indicator.open()
          self.$api.fill.getSocialInfo().then(res => {
            self.$Indicator.close()
            if (res.code == 0) {
              let data = res.data
              self.type = data.type
              self.society.contacts = data.contacts
              self.first = data.first
              self.second = data.second
              if (data.contacts.length == 0) {
                data.first.forEach((item, i) => {
                  if(i<2){
                    self.totalContacts.push({relationCode: item.value, label: item.label, name: '', phone: ''})
                  }
                })
                if(self.type === 1){
                  data.second.forEach((item, i) => {
                    if(i<2){
                      self.totalContacts.push({relationCode: item.value, label: item.label, name: '', phone: ''})
                    }
                  }) 
                }else if(self.type === 2){
                  data.second.forEach((item, i) => {
                    if(i === 0 ){
                      self.totalContacts.push({relationCode: item.value, label: item.label, name: '', phone: ''})
                    }
                  }) 
                  if(data.third){
                    self.third= data.third
                    console.log(self.third)
                    data.third.forEach((item, i) => {
                      self.totalContacts.push({relationCode: item.value, label: item.label, name: '', phone: ''})
                    }) 
                  }
                }
              }else{
                self.totalContacts = data.contacts
              }
              self.society.contacts=self.totalContacts.slice(0, 4)
            } else {
              self.$Toast(res.userMsg)
            }
          })
        },
        getContacts (index) {
        /* eslint-disable no-undef */
          jiujiJsBridge.getContacts({}, (res) => {
            this.society.contacts.forEach(function(item, i){
              if(i === index){
                item.phone =  res.split(',')[1]
              }
            })
          })
        },
        showPicker(index){
          const self = this
          self.index = index
          if(index<2){
            self.showFirstPicker=!self.showFirstPicker
          }else if(index === 2){
            self.showSecondPicker=!self.showSecondPicker
          }else if(index === 3){
            if(self.type === 1){
              self.showSecondPicker=!self.showSecondPicker
            }else if(self.type === 3){
              self.showThirdPicker=!self.showThirdPicker
            }
          }
        },
        select (data) {
          const self = this
          let index = self.index
          self.society.contacts.forEach((item, i) => {
            if(i === index){
              item.label = data.label[0]
              item.relationCode = data.value[0]
            }
          })
          this.showPicker(index)
        },
        next () {
          const self = this
          if (!self.nextEnable) {
            return
          }
          let flag = true
          self.society.contacts.reduce(function(prev, cur, index, array){
            if(prev && cur){
              if(prev.name === cur.name){
                self.$Toast('不能填写重复的联系人，请重新填写！')
                flag = false
              }else if(prev.phone === cur.phone){
                self.$Toast('不能填写重复的手机号码，请重新填写！')
                flag = false
              }
              return cur
            }
          })
          if(flag){
            self.$Indicator.open()
            self.$api.fill.saveSocialInfo(JSON.stringify(self.society.contacts)).then(res => {
              self.$Indicator.close()
              if (res.code == 0) {
                // self.$router.push('/detail/addition')
                self.$router.go(-1)
              } else {
                self.$Toast(res.userMsg)
              }
            })
          }
        }
      }
    }
</script>